<template>
  <el-container>
    <basic-crud :option="option" businessUrl="/org/deptGroupController">
      <template #systemInner="{ row }">
        <el-tag v-if="row.systemInner === 'true'">是</el-tag>
        <el-tag v-else type="info">否</el-tag>
      </template>
      <template #menu="{ row }">
        <el-button icon="Plus" @click="handleOpenDialog(row)" type="primary" link :loading="row.loading">关联部门</el-button>
      </template>
    </basic-crud>
    <basic-dialog-table v-model="visible" v-model:formData="depFormData" height="300" :option="addDepOption" title="选择部门"
      selectType="multiple" ref="basicDialogCrudRef" businessUrl="/org/deptController"
      apiGetListUrl="/org/deptController/listHasChildren" :submitBtnLoading="addDepSubmitLoading"
      v-model:defaultSelectList="defaultSelectList" @submit="handleAddDep"></basic-dialog-table>
  </el-container>
</template>

<script setup>
import { apiGetList } from '@/apis/orgManage/depManage'
import { apiAddDep, apiGetDepByGroupId } from '@/apis/orgManage/deptGroup'
 
import { cloneDeep } from 'lodash'
const option = {
  menuWidth: 260,
  column: [
    {
      label: '编号',
      prop: 'code',
      sort: true,
      search: true,
      width: 150,
      rules: [
        {
          required: true,
          message: '编号不能为空',
        },
      ],
    },
    {
      label: '名称',
      prop: 'name',
      sort: true,
      search: true,
      width: 250,
      rules: [
        {
          required: true,
          message: '名称不能为空',
        },
      ],
    },
    {
      label: '是否系统内置',
      prop: 'systemInner',
      sort: true,
      width: 130,
      readOnly: true,
      display: false,
      slot: 'systemInner',
    },

    {
      label: '状态',
      prop: 'status',
      display: false,
      statusTag: true,
      sort: true,
      width: 100,
      slot: 'status',
    },
    {
      label: '备注',
      prop: 'des',
      minWidth: 150,
      span: 24,
      type: 'textarea',
    },
  ],
}

const useAddDep = () => {
  const depFormData = ref({})
  const addDepOption = {
    isTableTree: true,
    defaultExpandAll: true,
    searchSpan: 8,
    searchLabelWidth: '50',
    menu: false,
    searchMenuPosition: 'right',
    height: 400,
    treeProps: { checkStrictly: true }, //默认父子关系无联系
    column: [
      {
        label: '编号',
        propType: 'String',
        prop: 'code',
        sort: true,
        search: true,
        width: 120,
        rules: [{ required: true, message: '编号不能为空' }],
      },
      {
        label: '名称',
        propType: 'String',
        prop: 'name',
        search: true,
        rules: [{ required: true, message: '名称不能为空' }],
        sort: true,
        width: 150,
      },
      {
        label: '部门主管领导',
        prop: 'deptLeader',
        component: 'BasicCrudTableSelect',
        dataType: 'user',
        comProps: {
          saveFieldMap: { deptLeader: 'name', deptLeaderId: 'id' },
        },
        minWidth: 120,
        curForm: depFormData,
        change: (newV) => {
          depFormData.value = newV
        }
      },
      {
        label: '地址',
        propType: 'String',
        prop: 'address',
        sort: true,
        width: 150,
      },
      {
        label: '联系电话',
        propType: 'String',
        prop: 'tel',
        sort: true,
        width: 150,
      },
      {
        label: '描述',
        type: 'textarea',
        prop: 'des',
        span: 24,
      },
    ],
  }
  const addDepSubmitLoading = ref(false)
  const curRow = ref({})
  const defaultSelectList = ref([])
  const originSelectList = ref([])
  const basicDialogCrudRef = ref()
  const visible = ref(false)
  const handleOpenDialog = async (row) => {
    row.loading = true
    curRow.value = row
    apiGetDepByGroupId(row.id)
      .then((res) => {
        defaultSelectList.value = res
        originSelectList.value = cloneDeep(res)
        visible.value = true
      })
      .finally(() => {
        row.loading = false
      })
  }

  // 新增部门确定
  const handleAddDep = async (selectData) => {
    let selectIds = cloneDeep(selectData).map(item => item.id)
    const params = {
      linkMDTOs: selectData.map((item) => {
        return {
          sourceId: curRow.value.id,
          sourceBus: curRow.value.bus,
          sourceObjId: curRow.value.objId,
          sourceRevId: curRow.value.revId,
          targetId: item.id,
          targetBus: item.bus,
          targetObjId: item.objId,
          targetRevId: item.revId,
          hasChildFlag: 'false',
        }
      }),
      findByTarget: false,
      deleteUnHas: originSelectList.value.some(item => !selectIds.includes(item.id))
    }
    await apiAddDep(params, addDepSubmitLoading)
    ElMessage.success('新增部门成功！')
    visible.value = false
  }
  return {
    visible,
    curRow,
    handleOpenDialog,
    depFormData,
    addDepOption,
    basicDialogCrudRef,
    handleAddDep,
    addDepSubmitLoading,
    defaultSelectList,
    originSelectList
  }
}

const {
  visible,
  curRow,
  depFormData,
  addDepOption,
  handleOpenDialog,
  basicDialogCrudRef,
  handleAddDep,
  addDepSubmitLoading,
  defaultSelectList,
  originSelectList
} = useAddDep()
</script>

<style lang="scss" scoped></style>
